@extends('layout.home')

@section('youpian')
@endsection

@section('head-top')
@endsection

@section('return')
<p class="log">
    <a href="/home/login">
        登录
    </a>
    <span>
    </span>
    <a href="/">
        首页
    </a>
</p> 
@endsection
@section('content')
	<style>	
		ul li input{
			width:150px;
		
			
		}
		#line{
			height:500px;
			width:20px;
			border-width:0px 1px 0px 0px;
			border-color:#ddd;
			border-style:solid;

		}
		.liantu{
			position:absolute;
			top:250px;
			left:800px;
			
		}
		.container{
			
			position:relative;
		}

	</style>
	<div class="container">

	<div class="register">
		
		<h2>注册</h2>
		  	  <hr>
		  	  @if (count($errors) > 0)
      			<div class="alert alert-success">
              @foreach ($errors->all() as $error)
              	<li class='list-unstyled'>
                	<img src="/admins/images/info.png" alt="">&nbsp;
                {{ $error }}</li>
              @endforeach
      			</div>
 			  @endif
				 <div class="col-md-8 register-top-grid" style='margin-bottom:70px'>
				 <form action='/home/register' method="post"> 
					<ul class="list-unstyled list-inline mation" >
						<li><span>昵&nbsp; &nbsp; 称</span></li>
						<li><input type="text" name='username'></li>
						<li><span></span></li>
						
					</ul>
					<ul class="list-unstyled list-inline mation">
						<li><span>密&nbsp; &nbsp; 码</span></li>
						<li><input type="password" name='password'></li>
						<li><span></span></li>
					</ul>
					<ul class="list-unstyled list-inline mation">
						<li><span>确认密码</span></li>
						<li><input type="password" name='repassword'></li>
						<li><span></span></li>
					</ul>
					<ul class="list-unstyled list-inline mation">
						<li><span>邮&nbsp; &nbsp; 箱</span></li>
						<li><input type='text' name='email'></li>
						<li><span></span></li>
					</ul>
					
					 
				     
					 <div class="clearfix"> </div>
					 	<ul class='list-unstyled list-inline'>
							 <li><div>
							   <a class="news-letter" href="#">
								 <label class="checkbox"><input type="checkbox" name='checked'><i> </i>同意协议</label>
							   </a>
							 </div></li>
							 <li style='margin-left:106px'><div class="register-but">
							 	{{csrf_field()}}
							 	<button class='btn btn-info zhuce' style='width:100px'>注册</button>
								<div class="clearfix"> </div>
							</div></li>
						</ul>
					</form>
		   		</div>
			   	<div id='line' class='col-md-offset-7 '></div>
			   	<div class='liantu col-md-2 '>
				   	<img src="/homes/images/liantu.png" alt="">
					<ul class='list-unstyled list-inline' style='margin-top:10px;'>
						<li><a href="#"><img src="/homes/images/liantu1.png" alt=""></a></li>
						<li><a href="#"><img src="/homes/images/liantu2.png" alt=""></a></li>
						<li><a href="#"><img src="/homes/images/link.png" alt=""></a></li>
					</ul>
			   	 </div>
	</div>
</div>


	
	
	<script src='/homes/js/jquery-1.8.3.min.js'></script>
	<script type='text/javascript'>
		// 检测变量
		var CURSE = false;
		var CPASS = false;
		var CEMAIL = false;

		// 检测用户名
		$('input[name=username]').focus(function(){
			// 修改当前样式
			$(this).css('border','solid 1px blue');
			$(this).parent().next().show().html('请输入8-18位的字母数字下划线').css('color','#888');
			CURSE = false;
		});
		// 丧失焦点事件
		$('input[name=username]').blur(function(){
			//获取元素的值
			var v = $(this).val();
			// 正则
			var reg = /^\S{8,18}$/;
			if(!reg.test(v)){
				$(this).css('border','solid 1px red');
				$(this).parent().next().show().html('输入有误，请重新输入').css('color','red');
				CURSE = false;
			}else{
				// 验证用户名是否存在
				var input = $(this);
				// 发送ajax请求
				$.ajax({
					url:'/home/checkuser',
					type:'get',
					data:{username:v},
					success:function(data){
						if(data == '1'){
							input.css('border','solid 1px red');
							input.parent().next().html('这个用户名已存在').css('color','red');
							CURSE = false;
						}else{
							input.css('border','solid 1px #ddd');
							input.parent().next().show().html('√').css('color','green');
							CURSE = true;
						}
					},
					async:false
				});
				
			}
		});

		// 检测密码  获取焦点
		$('input[name=password]').focus(function(){
			$(this).css('border','solid 1px blue');
			$(this).parent().next().show().html('请输入6-20字母数字下划线').css('color','#888');
			CPASS = false;
		});

		// 丧失焦点
		$('input[name=password]').blur(function(){
			var v = $(this).val();
			var rv = $('input[name=password]').val();
			var reg = /^\w{6,20}$/;
			if(!reg.test(v)){
				$(this).css('border','solid 1px red');
				$(this).parent().next().html('输入有误，请重新输入').css('color','red');
			}else if(v!=rv){
				$(this).css('border','solid 1px red');
				$(this).parent().next().show().html('两次密码输入不一致,请重新输入').css('color','red');
			}else{
				$(this).css('border','solid 1px #ddd');
				$(this).parent().next().show().html('√').css('color','green');
			}
		});

		// 检测确认密码
		$('input[name=repassword]').focus(function(){
			$(this).css('border','solid 1px blue');
			$(this).next().show().html('请输入6-20字母数字下划线').css('color','#888');
			CPASS = false;
		});

		// // 丧失焦点
		$('input[name=repassword]').blur(function(){
			var v = $(this).val();
			var rv = $('input[name=password]').val();
			var reg = /^\w{6,20}$/;
			if(!reg.test(v)){
				$(this).css('border','solid 1px red');
				$(this).next().html('输入有误，请重新输入').css('color','red');
			}else if(v!=rv){
				$(this).css('border','solid 1px red');
				$(this).parent().next().html('两次密码输入不一致,请重新输入').css('color','red');
			}else{
				$(this).css('border','solid 1px #ddd');
				$(this).parent().next().show().html('√').css('color','green');
			}
		});

		//邮箱
		$('input[name=email]').focus(function(){
			$(this).css('border','solid 1px blue');
			$(this).parent().next().show().html('输入邮箱账号').css('color','#888');
			CEMAIL = false;
		});
		$('input[name=email]').blur(function(){
			var v = $(this).val();
			var reg = /^\d{5,12}@qq.com$/;
			if(!reg.test(v)){
				$(this).css('border','solid 1px red');
				$(this).parent().next().html('邮箱格式有误,请重新输入').css('color','red');
				CEMAIL = false;
			}else{
				$(this).css('border','solid 1px #ddd');
				$(this).parent().next().show().html('√').css('color','green');
				CEMAIL = true;
			}
		});

		// 表单的提交事件
		$('form').submit(function(){
			$('input').trigger('blur');
			console.log(CUSER);
			console.log(CPASS);
			console.log(CEMAIL);
			// 检测元素是否正确
			if(CUSER && CPASS && CEMAIL){
				return true;
			}else{
				return false;
			}
		});
		
	</script>


@endsection